<template>
  <view>
    <block v-for="(item,index) in list" :key="index">
      <view class="firend-tree" @click="onJumpChat(item, index)">
        <view class="parent" :class="{first: item.first, active: item.selected}">
          <view class="avatar-box">
            <image class="avatar" :src="item.headImg" mode="aspectFill"></image>
            <!-- <view class="dot"></view> -->
          </view>
          
          <view class="info">
            <text class="username font-32">{{item.userName}}</text>
            <image v-if="item.isPartner" class="icon-iscooper" src="https://files.yzsheng.com/client/order/hehuorenicon.png" mode="aspectFill"></image><!-- 是合伙人 -->
            <image v-else class="icon-notcooper" src="https://files.yzsheng.com/client/me/img/hehuoren2.png" mode="aspectFill"></image><!-- 不是合伙人 -->
            <image v-if="item.isOwner" class="icon-owner" src="https://files.yzsheng.com/client/order/chebiao.png" mode="aspectFill"></image><!-- 车主 -->
            <view class="status" :class="{active: item.isCostMoney}">
              {{item.isCostMoney ? '已消费' : '未消费'}}
            </view>
          </view>
          
          <view class="invite-num" v-if="item.shareCount > 0" @click.stop="onClickOpenChild(item, index)">
            <text class="text" v-if="item.first">已邀请</text>
            <text class="text" v-if="item.first">{{item.shareCount}}人</text>
            <view class="icon">
              <u-icon v-if="item.selected" name="arrow-up-fill" color="#3D3D3D" size="20rpx"></u-icon>
              <u-icon v-else name="arrow-down-fill" color="#9A9A9A" size="20rpx"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="child" v-if="item.selected && item.shareUsers && item.shareUsers.length > 0">
        <firend-tree :list="item.shareUsers" />
      </view>
    </block>
  </view>
</template>

<script>
export default {
  name: 'firend-tree',
  data() {
    return {
      
    }
  },
  props: {
    list: {
      type: Array
    }
  },
  watch: {
    list() {}
  },
  methods: {
    onClickOpenChild(item, index) {
      let temp = this.list[index]
      if(temp.shareUsers.length > 0) {
        temp.shareUsers = temp.shareUsers.map(i => {
          if(!i.hasOwnProperty('selected')) {
            i.selected = false
          }
          return i
        })
      }
      temp.selected = !temp.selected
      this.list.splice(index, 1, temp)
    },
    onJumpChat(item, index) {
      let name = item.userName ? '&name=' + encodeURIComponent(item.userName) : ''
      uni.navigateTo({
        url: `/pages_chat/chat/chat?id=${item.uid}&type=C2C${name}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.firend-tree{
  .parent{
    height: 150rpx;
    border-radius: 10rpx;
    padding: 0 0 0 24rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 2rpx solid #eee;
    .avatar-box{
      width: 90rpx;
      height: 90rpx;
      position: relative;
      .avatar{
        display: block;
        width: 90rpx;
        height: 90rpx;
        border-radius: 90rpx;
      }
      .dot{
        width: 20rpx;
        height: 20rpx;
        background: #F17124;
        border-radius: 50%;
        position: absolute;
        top: 8rpx;
        right: 0;
      }
    }
    .info{
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      .icon-iscooper, .icon-notcooper{
        width: 44rpx;
        height: 40rpx;
        margin-left: 16rpx;
      }
      .icon-owner{
        width: 40rpx;
        height: 40rpx;
        margin-left: 16rpx;
      }
      .status{
        width: 90rpx;
        height: 34rpx;
        border: 2rpx solid #D55000;
        border-radius: 17px;
        font-size: 22rpx;
        color: #D55000;
        text-align: center;
        line-height: 34rpx;
        margin-left: 18rpx;
        &.active{
          border: 2rpx solid #50B300;
          color: #55B507;
        }
      }
    }
    .invite-num{
      width: 120rpx;
      height: 150rpx;
      border-radius: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #666;
      .text{
        font-size: 24rpx;
      }
    }
    &.first{
      background-color: #fff;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.12);
      border-bottom: none;
      .invite-num{
        background-color: #F1F1F1;
      }
      &.active{
        border: 2rpx solid #FBD220;
        .invite-num{
          background-color: #FBD220;
          color: #44423c;
        }
      }
    }
  }
}
</style>
